<template>
  <div class="relative flex-center">
    <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="114"
    height="114"
    viewBox="0 0 114 114"
    fill="none"
  >
    <path
      fill-rule="evenodd"
      :fill="color"
      d="M57 114C88.4802 114 114 88.4802 114 57C114 25.5198 88.4802 0 57 0C25.5198 0 0 25.5198 0 57C0 88.4802 25.5198 114 57 114ZM57 2C87.3757 2 112 26.6243 112 57C112 87.3757 87.3757 112 57 112C26.6243 112 2 87.3757 2 57C2 26.6243 26.6243 2 57 2Z"
    ></path>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="89"
    height="89"
    class="circle absolute"
    viewBox="0 0 89 89"
    fill="none"
  >
    <path
      fill-rule="evenodd"
      :fill="color"
      d="M0.219498 40.0522C1.86939 23.4262 12.6701 9.49181 27.5141 3.35676L32.0977 14.4469Q28.0544 16.118 24.582 18.8162Q21.1332 21.4961 18.5078 24.9853Q15.8621 28.5015 14.2546 32.5735Q12.6062 36.7492 12.1608 41.2372L0.219498 40.0522ZM42.2618 88.9447C25.4423 88.1115 11.0799 77.94 4.25201 63.5074L15.0994 58.3756Q16.9637 62.3164 19.8154 65.6418Q22.6554 68.9534 26.2572 71.4023Q29.8969 73.8771 34.0447 75.2851Q38.3139 76.7344 42.8555 76.9594L42.2618 88.9447ZM89 44.5C89 61.4902 79.4783 76.2566 65.4799 83.7539L59.8143 73.1756Q63.646 71.1234 66.8179 68.1255Q69.9851 65.1322 72.2524 61.4253Q74.5502 57.6687 75.755 53.4509Q77 49.0925 77 44.5L89 44.5ZM86.4292 29.5576L75.1256 33.5862Q73.6515 29.45 71.1137 25.8397Q68.6002 22.2639 65.2323 19.47Q61.8472 16.6619 57.859 14.8605Q53.7835 13.0196 49.3543 12.3584L51.1261 0.489961C67.5274 2.93844 81.0046 14.3371 86.4292 29.5576Z"
    ></path>
  </svg>
  </div>
  
</template>
<script setup>
const porp = defineProps({
  color: {
    Type: String,
    default: "#FF003A",
  },
});
</script>
<style scoped>
.circle {
  left: 12px;
  top: 12px;
}
</style>

    
    